<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,minimal-ui" />
  <title>highcharts图表报表</title>
  <link rel="stylesheet" href="css/charts_demo.css">
  <script src="js/vuejs-2.5.16.js"></script>
  <script src="js/axios-0.18.0.js"></script>
  <script src="js/highcharts.js"></script>
  <script src="js/highcharts-3d.js"></script>
  <script src="js/highcharts-more.js"></script>
  <script src="js/drilldown.js"></script>
  <script src="js/exporting.js"></script>


</head>
<body>
<div id="app" class="my-box">
  <div class="my-box-left">
    <button @click="columnCharts">统计各部门人数</button> <br/> <br/>
    <button @click="lineCharts">月份入职人数统计</button> <br/> <br/>
    <button @click="pieCharts">员工地方来源统计</button> <br/> <br/>
  </div>
  <div class="my-box-right">
    <div id="container" style="height:450px;"></div>
  </div>
</div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{},
    methods: {
      //统计各部门人数
      columnCharts() {
        axios.get("/stat/columnCharts").then(res => {
          let datas = res.data;
        let titles=[];  //x轴上显示的数据
        let values=[]; //y轴上显示的数据
        for (let i = 0; i < datas.length; i++) {
          titles[i] = datas[i].deptName;
          values[i] = datas[i].num;
        }
        var option = {
          chart: {
            type: 'column'
          },
          title: {
            text: '各部门人数'
          },
          xAxis: {
            categories: titles,
            crosshair: true
          },
          yAxis: {
            min: 0,
            title: {
              text: '人数'
            }
          },
          tooltip: {
            // head + 每个 point + footer 拼接成完整的 table
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
              '<td style="padding:0"><b>{point.y} 人</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
          },
          plotOptions: {
            column: {
              borderWidth: 0
            }
          },
          credits: {
            enabled: false  //去除水印
          },
          series: [{
            name: '人数',
            data: values
          }]
        };
        var chart = Highcharts.chart('container',option);
        })
      },
      //月份入职人数统计
      lineCharts(){
        axios.get("/stat/lineCharts").then(res=>{
          let datas = res.data;
          console.log(datas)
        let values=[]; //y轴上显示的数据
        let xs=[]; //x轴上显示的数据
        for (let i = 0; i < datas.length; i++) {
          values[i] = datas[i].num;
          xs[i] = datas[i].name;
        }

        var chart = Highcharts.chart('container', {
          chart: {
            type: 'line'
          },
          title: {
            text: '月份入职人数统计'
          },
          xAxis: {
            categories: xs
          },
          yAxis: {
            title: {
              text: '入职人数'
            }
          },
          plotOptions: {
            line: {
              dataLabels: {
                // 开启数据标签
                enabled: true
              },
              // 关闭鼠标跟踪，对应的提示框、点击事件会失效
              enableMouseTracking: false
            }
          },
          series: [{
            name: '入职人数',
            data: values
          }]
        });

      })
      },
      //员工地方来源统计
      pieCharts(){
        axios.get("/stat/pieCharts").then(res=>{
          let datas = res.data;
        Highcharts.chart('container', {
          chart: {
            type: 'column'
          },
          title: {
            text: '公司原因地方来源'
          },
          xAxis: {
            type: 'category'
          },
          yAxis: {
            title: {
              text: '人数'
            }
          },
          legend: {
            enabled: false
          },
          plotOptions: {
            series: {
              borderWidth: 0,
              dataLabels: {
                enabled: true,
                format: '{point.y}'
              }
            }
          },
          tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
          },
          series: [{
            name: '省份',
            colorByPoint: true,
            data: datas
          }],
          drilldown: {
            series: datas
          }
        });

      })
      }
    }
  });
</script>
</html>